<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Smart 后台</title>
    <link rel="stylesheet" href="/Smart_Backstage/layui/css/layui.css">
    <script src="/Smart_Backstage/layui/layui.js" charset="utf-8"></script>
    <script src="\Smart_Backstage\js\jquery-3.4.1.js"></script>

    <style type="text/css">

        body{
            background-color: #1E9FFF;
        }


        #domain{
            position: absolute;
            width: 350px;
            height: 350px;
            background: white;
            text-align: center;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius:15px;
            opacity: 0.7;
            box-shadow: 5px 5px 10px #2F4056;
        }

        #title{
            padding-top: 20px;
            color: #2E2D3C;
            font-family: 微软雅黑;
            font-weight: bold;
        }

        #leftmessage{
            position: absolute;
            margin-top: 10px;
            left: 30px;
        }

    </style>

</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">

    <div id="domain">
        <div style="padding: 20px">
            <h1 id="title">Smart后台</h1>
            <div class="layui-form-item" >
                <p id="leftmessage">欢迎登录Smart后台系统</p>
            </div>
            <form class="layui-form layui-form-pane" style="padding-top: 40px">
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input name="name" class="layui-input" type="text" lay-verify="required" placeholder="请输入账号" autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input name="password" class="layui-input" type="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn " lay-filter="demo2" lay-submit="">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>

</body>

<script>



    layui.use(['form'], function() {
        var form = layui.form,
            $ = layui.jquery;

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo2)', function(data){
            //JSON.stringify(data.field)
            $.ajax({
                // 编写json格式，设置属性和值
                url: "/Smart_Backstage/user/login",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data.field),
                dataType: "json",
                type: "post",
                success: function (data) {
                    if(data!=undefined&&data.result == 1){
                        window.location.href = "index.html";
                    }else{
                        layer.msg(data.msg, {
                            time: 5000, //5s后自动关闭
                            btn: ['好的']
                        });
                    }
                }
            })
            return false;
        });


    });

</script>

</html>